<template>
	<view class="container">
		<view class="subsection">
			<u-subsection mode="subsection" :list="list" :current="current" active-color="#2979ff" @change="sectionChange"></u-subsection>
		</view>
		<view class="goods-list">
			<view class="goods-item" v-for="(item, index) in goodsList" :key="index" @click="goGoodsDetail(item.goodsId)" v-if="current == 0">
				<image mode="aspectFill" :src="item.pic"></image>
				<view class="content">
					<text class="name">{{item.goodsName}}</text>
					<text class="price">￥{{item.price}}</text>
					<view class="handle">
						<u-button :custom-style="customStyle" size="mini" shape="circle" @click="edit(item.goodsId)">编辑</u-button>
						<u-button :custom-style="customStyle" size="mini" shape="circle" @click="moreButton(item.goodsId)">···</u-button>
					</view>
				</view>
			</view>
			
			<view class="goods-item" v-for="(item, index) in goodsList" :key="index" v-if="current == 1">
				<image mode="aspectFill" :src="item.pic"></image>
				<view class="content">
					<text class="name">{{item.goodsName}}</text>
					<text class="price">￥{{item.price}}</text>
					<view class="handle">
						<u-button :custom-style="customStyle" size="mini" shape="circle" @click="putaway(item.goodsId)">重新上架</u-button>
						<u-button :custom-style="customStyle" size="mini" shape="circle" @click="del(item.goodsId)">删除</u-button>
					</view>
				</view>
			</view>
			
			<u-action-sheet :safe-area-inset-bottom="true" :list="editList" v-model="editShow" @click="editClick($event)"></u-action-sheet>
			
			<u-empty v-if="goodsList.length == 0" mode="list"></u-empty>
			
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	import {
		getMyGoodsList,deleteByGoodsId,soldOutByGoodsId,putawayByGoodsId
	} from '@/api/goods.js'
	export default {
		data() {
			return {
				pageNum: 1,
				pageSize: 10,
				goodsList: [],        // 商品列表
				list: [{
					name: '我发布的'
				},{
					name: '已下架的'
				}],
				current: 0,
				
				customStyle: {
					margin: '5rpx 20rpx'
				},
				
				editList: [{
					text: '下架',
					fontSize: 28
				}, {
					text: '删除',
					fontSize: 28
				}],
				editShow: false
			};
		},
		methods: {
			sectionChange(index) {
				console.log(index)
				this.current = index;
				this.getMyGoodsList()
				
			},
			getMyGoodsList() {
				let params = {}
				if (this.current == 0) {
					params.status = 1
				} else if (this.current == 1) {
					params.status = 0
				}
				getMyGoodsList(params).then(res => {
					this.goodsList = res.data
				})
			},
			// 导航到商品详情页
			goGoodsDetail(goodsId) {
				this.$u.route('/pages/goods-detail/goods-detail', {
					goodsId: goodsId
				})
			},
			edit(goodsId) {
				this.$u.route('/pages/add-goods/add-goods', {
					goodsId: goodsId
				});
			},
			// 商品重新上架
			putaway(goodsId) {
				putawayByGoodsId(goodsId).then(res => {
					this.getMyGoodsList()
				})
			},
			// 商品删除
			del(goodsId) {
				uni.showModal({
					title: '温馨提示',
					content: "确定删除该宝贝吗？",
					success: (res) => {
						if (res.confirm) {
							deleteByGoodsId(goodsId).then(res => {
								this.getMyGoodsList()
								this.$refs.uToast.show({
									title: '商品已删除',
									type: 'success'
								})
							})
						}
					}
				})
			},
			moreButton(goodsId){
				this.editShow = true
				// editClick回调不能串商品ID，在这里设置
				this.currentGoodsId = goodsId
			},
			// 底部弹出一个操作菜单，回调事件
			editClick(index) {
				
				// console.log(index, this.currentGoodsId)
				if(index == 0){
					// 点击下架
					uni.showModal({
						title: '温馨提示',
						content: "确定下架该宝贝吗？",
						success: (res) => {
							if (res.confirm) {
								soldOutByGoodsId(this.currentGoodsId).then(res => {
									this.getMyGoodsList()
									this.$refs.uToast.show({
										title: '商品已下架',
										type: 'success'
									})
								})
							}
						}
					})
				} else if (index == 1) {
					// 点击删除
					uni.showModal({
						title: '温馨提示',
						content: "确定删除该宝贝吗？",
						success: (res) => {
							if (res.confirm) {
								deleteByGoodsId(this.currentGoodsId).then(res => {
									this.getMyGoodsList()
									this.$refs.uToast.show({
										title: '商品已删除',
										type: 'success'
									})
								})
							}
						}
					})
				}
			}
		},
		onLoad() {
			this.getMyGoodsList()
		},
	}
</script>

<style lang="scss">
	@import "./my-publish.scss";
</style>
